<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <link rel="stylesheet" href="./css/font-awesome.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/cate.css">

    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <!-- 分类名称开始 -->
            <form class="layui-form" action="">
                <div class="layui-form-item advpos_head">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block ">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        <button class="layui-btn layui-btncolor" lay-submit lay-filter="formDemo" id="btn-search">搜素</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                    </div>
                </div>
                <div class="action-box">
                    <div class="action-box-btn">
                        <button type="button" class="layui-btn layui-btnadd" id="btnAddCate">新增</button>
                        <button type="button" class="layui-btn layui-btnout">导出</button>
                    </div>
                    <!-- 右边 工具按钮 开始 -->
                    <div class="layui-form-item">
                        <div class="layui-input-inline layui-input-bar">
                            <!-- 三个图标 -->
                            <button type="button" class="layui-btn layui-btn-primary btn-radius" id="tip_btn">
                <i class="layui-icon layui-icon-up" id="change"></i>
              </button>
                            <button type="button" class="layui-btn layui-btn-primary btn-radius" id="refresh_btn">
                <i class="layui-icon layui-icon-refresh"></i>
              </button>
                            <button type="button" class="layui-btn layui-btn-primary btn-radius func_btn" id="tooltip_btn">
                <i class="layui-icon layui-icon-app"></i>
              </button>
                            <!-- 文字提示 -->
                            <div class="filter_tip" style="display: none;">
                                <div class="tip_info">关闭搜索区</div>
                                <div class="tip_tri"></div>
                            </div>
                            <div class="filter_refresh" style="display: none;">
                                <div class="refresh_info">刷新</div>
                                <div class="refresh_tri"></div>
                            </div>

                            <div class="filter_tooltip" style="display: none;">
                                <div class="layui-form-item tooltip_info">
                                    <div class="checkbox">
                                        <input type="checkbox" name="cataID" title="分类ID" checked id="cataId">
                                        <span>分类ID</span>
                                    </div>
                                    <div class="checkbox">
                                        <input type="checkbox" name="cataName" title="分类名称" checked>
                                        <span>分类名称</span>

                                    </div>
                                    <div class="checkbox">
                                        <input type="checkbox" name="icon" title="分类图标" checked>
                                        <span>分类图标</span>

                                    </div>
                                    <div class="checkbox">
                                        <input type="checkbox" name="sort_num" title="权重大小" checked>
                                        <span>权重大小</span>
                                    </div>
                                </div>
                                <div class="tooltip_tri"></div>
                            </div>
                        </div>
                    </div>
                    <!--  右边 工具按钮 结束 -->
                </div>
            </form>
            <!-- 分类结束 -->
            <!-- 卡片区域 -->
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table">
                        <colgroup>
                            <col width="48" />
                            <col />
                            <col />
                            <col />
                            <col />
                            <col width="200" />
                        </colgroup>
                        <thead class="thead">
                            <tr class="tr">
                                <th>#</th>
                                <th id="cataID">分类ID</th>
                                <th id="cataName">分类名称</th>
                                <th id="icon">分类图标class</th>
                                <th id="sort_num">权重</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- 添加分类的弹出层 -->
            <script type="text/html" id="dialog-add">
                <form class="layui-form" id="form-add">
                    <div class="layui-form-item">
                        <label class="layui-form-label">*分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="catename">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">*图标class</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
                            <span>具体参见fontawesome图标库</span>
                        </div>
                    </div>

                    <!-- + -开始 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序大小</label>
                        <div class="layui-input-block">
                            <input type="submit" id="btn" value="-">
                            <input type="text" id="num" value="10">
                            <input type="button" id="btn2" value="+">
                        </div>
                    </div>
                    <!-- + -结束 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block  layui-input-block-right">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo" id="add-Confirm">确认</button>
                            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>
            </script>

            <!-- 修改分类的弹出层 -->
            <script type="text/html" id="dialog-edit">
                <form class="layui-form" id="form-edit" lay-filter="form-edit">
                    <!-- 隐藏域 保存id的值 -->
                    <input type="hidden" name="id">
                    <div class="layui-form-item">
                        <label class="layui-form-label">*分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="catename">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">*图标class</label>
                        <div class="layui-input-block">
                            <input type="text" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
                            <span>具体参见fontawesome图标库</span>
                        </div>
                    </div>

                    <!-- + -开始 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序大小</label>
                        <div class="layui-input-block">
                            <input type="submit" id="btn" value="-">
                            <input type="text" id="num" value="10">
                            <input type="button" id="btn2" value="+">
                        </div>
                    </div>
                    <!-- + - 结束-->
                    <div class="layui-form-item">
                        <div class="layui-input-block  layui-input-block-right">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo" id="add-Change">确认修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>
            </script>

            <!-- 底部 -->
            <div id="pageBox"></div>
        </div>
    </div>
</body>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script src="./layui/layui.all.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/api.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/cate.js"></script>

</html>